<template>
  <div class="cont">
    <div class="search-container fr">
      <!-- @blur="hideAutoComplete" -->
      <input
        type="text"
        class="search-txt fl"
        ref="search-input"
        v-model="search.keyword"
        @focus="(search.Placeholder = false), (search.show = true)"
        @keydown.up="suggestActive--"
        @keydown.down="suggestActive++"
        @keydown.enter="doSearch()"
        :placeholder="search.default"
      />
      <div class="suggest">
        <ul v-if="search.list.length && search.show == true">
          <li
            v-for="(item, index) in search.list"
            :class="{ active: index == suggestActive }"
            :key="index"
            @mouseover="suggestActive = index"
            @click="doSearch()"
            v-html="item"
          ></li>
        </ul>
      </div>
      <a href="javascript:;" class="search-btn fl" @click="doSearch">搜索</a>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      search: {
        keyword: "",
        Placeholder: true,
        list: [], //搜索数据
        active: -1, //搜索上下选中
        show: false,
        timer: null,
        default: "张一山同款 开衫体恤",
      },
      // dalist:[
      //     "鞋子女*",
      //     "鞋子男&&-",
      //     "鞋子++",
      //     "上子鞋-",
      //     "儿童+鞋子",
      //     "鞋&-",
      // ],
      dalist: [
        {
          name: "鞋子女*",
          value: 0,
        },
        {
          name: "鞋子男&&-",
          value: 1,
        },
        {
          name: "鞋子++",
          value: 2,
        },
        {
          name: "上子鞋-",
          value: 3,
        },
        {
          name: "儿童+鞋子",
          value: 4,
        },
        {
          name: "鞋&-",
          value: 5,
        },
      ],
    };
  },
  mounted() {},
  created() {
    this.search.keyword = this.$route.params.keyword;
  },
  watch: {
    async "search.keyword"() {
      let _this = this;
      if (_this.search.keyword) {
        try {
          // this下有$http和axios都可
          // let { data } = await this.axios({
          //                    let { data } = await this.$http({
          // 	url: '/searchautocomplete',
          // 	method: 'GET',
          // 	params: {
          // 		kw: this.search.keyword,
          // 	},
          // });
          //模拟数据
          var arr = [];
          for (var i = 0; i < _this.dalist.length; i++) {
            arr.push(
              _this.dalist[i].name.replace(
                new RegExp(_this.escapeRegExp(_this.search.keyword), "g"),
                `<span style="color:#f00;">${_this.search.keyword}</span>`
              )
            );
          }
          _this.search.list = arr;
        } catch (e) {
          console.log(e);
        }
      } else {
        // 监听没值时不显示列表
        _this.search.list = [];
      }
    },
  },
  computed: {
    suggestActive: {
      get() {
        return this.search.active;
      },
      set(val) {
        if (val < 0) {
          val = 0;
        } else if (val >= this.search.list.length) {
          val = this.search.list.length - 1;
        }
        this.search.active = val;
      },
    },
  },
  methods: {
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
    }, // 回车
    doSearch() {
      let keyword;
      this.dalist.forEach((item, index) => {
        if (index == this.search.active) {
          keyword = item.name;
        }
      });
      if (this.search.active == -1) {
        keyword = this.search.default;
      }
      this.search.keyword = keyword;
      console.log("当前选择值：" + this.search.keyword);
      // this.search.list = [];
      // this.$refs["search-input"].blur();
      // this.$router.push({
      //     name: "search",
      //     params: {
      //         keyword
      //     }
      // });
    },
    //input失去焦点列表点击
    hideAutoComplete() {
      setTimeout(() => {
        this.search.Placeholder = true;
        this.search.show = false;
      }, 200);
    },
  },
};
</script>
<style scoped lang="less">
.cont {
  width: 100%;
  height: 100vh;
}

.cont .search-container {
  // height: 38px;
  margin-top: 26px;
  position: relative;
}

.cont .search-txt {
  width: 4rem;
  height: 0.5rem;
  line-height: 32px;
  padding: 2px 0 2px 38px;
  border: 1px solid #b4a078;
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
  font-size: 14px;
  outline: none;
  position: relative;
  z-index: 2;
  background: transparent;
}

.cont .search-btn {
  width: 1rem;
  height: 0.5rem;
  line-height: 0.5rem;
  border-top-right-radius: 19px;
  border-bottom-right-radius: 19px;
  background: #b4a078;
  color: #fff;
  text-align: center;
  display: inline-block;
}

.cont .search-btn:hover {
  background: #c2ae8d;
}

.cont .search-container .icon {
  width: 14px;
  height: 14px;
  // background: url(../imgs/icon1.png) no-repeat 0 -312px;
  position: absolute;
  left: 18px;
  top: 12px;
}

.cont .search-container .placeholder {
  width: 2rem;
  font-size: 14px;
  position: absolute;
  left: 38px;
  top: 9px;
  color: #999;
  z-index: 1;
}

.cont .suggest {
  background: #fff;
  width: 80%;
  position: absolute;
  z-index: 99;
  left: 18px;
  top: 38px;
}

.cont .suggest li {
  padding-left: 10px;
  padding-right: 12px;
  width: 400px;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  cursor: pointer;
}

.cont .suggest li.active {
  color: #b4a078;
  background: #f8f5f0;
}

.cont .keyword-list {
  width: 444px;
  height: 12px;
  position: absolute;
  left: 8px;
  top: 46px;
}

.cont .keyword-list a {
  color: #999;
  font-size: 12px;
  line-height: 12px;
  border-right: 1px solid #ccc;
  padding: 0 10px;
}

.cont .keyword-list a.nbr {
  border-right: none;
}
</style>
